<template>
	<view class="home">
		<top-nav>
			<view class="top-nav-content">
				<view class="logo"></view>
				<view class="title">阿拉丁神灯</view>
			</view>
		</top-nav>
		<u-notice-bar v-show="noticeShow" mode="horizontal" :close-icon="true" color="#FFB721" font-size="30" bg-color="#4B4B4B" :is-circular="false" :list="['公告正文内容不超过一行']" @close="noticeShow=false"></u-notice-bar>
		<view class="data-content">
			<view class="info">
				<view class="list">
					<view class="number">0</view>
					<view class="text">全网通兑消耗</view>
				</view>
				<view class="list">
					<view class="number">0</view>
					<view class="text">全网通兑消耗</view>
				</view>
			</view>
			<view class="logo-wrap">
				<view class="logo-bg">
					<view class="logo"></view>
				</view>
			</view>
			<view class="info">
				<view class="list">
					<view class="text">本轮已兑换</view>
					<view class="number">222</view>
				</view>
				<view class="list">
					<view class="text">本轮兑换成本</view>
					<view class="number">123666</view>
				</view>
			</view>
		</view>
		<view class="return-agt">预计返回 100 AGT</view>
		<view class="count">100</view>
		<view class="desc">余额 100 USDT</view>
		<myButton @clickFun="clickFun">确定</myButton>
		<u-popup v-model="show" mode="center" :custom-style="{background: 'none'}">
			<view class="popup-content">
				<view class="close-btn" @click="handleFun()"></view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
		<bottom-nav :currentIndex="2"></bottom-nav>
	</view>
</template>

<script>
	import topNav from '../../components/top-nav/top-vue.vue';
	import bottomNav from '../../components/bottom-nav/bottom-nav.vue';
	import myButton from '../login/components/button.vue'
	export default{
		components:{
			topNav:topNav,
			bottomNav:bottomNav,
			myButton:myButton
		},
		data(){
			return {
				show: true,
				noticeShow: true,
			}
		},
		created(){
		
		},
		methods:{
			clickFun(){
				this.$refs.uToast.show({
					title: '点击了确定',
					type: 'success',
				})
			},
			handleFun(){
				uni.navigateTo({
				    url: '/pages/share/get'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home{
		margin-bottom:140rpx;
	}
	.top-nav-content{
		width:100%;
		display: flex;
		align-items: center;
		position:relative;
		.title{
			flex:1;
			text-align: center;
		}
		.logo{
			width:30*2rpx;
			height:30*2rpx;
			border-radius: 50%;
			border:2px solid #EEEEEE;
			margin-left:40rpx;
			position:absolute;
			top:50%;
			transform: translateY(-30rpx);
			background-repeat: no-repeat;
			background-color: #69DA73;
			background-image: url('/static/home/logo.png');
			background-position: center center;
			background-size: 20*2rpx;
		}
	}
	.data-content{
		padding:20rpx 40*2rpx 0;
		.info{
			width: 290*2rpx;
			margin:0 auto;
			display: flex;
			justify-content: space-between;
			text-align: center;
			margin-bottom:6rpx;
		}
		.logo-wrap{
			width:290*2rpx;
			height:217*2rpx;
			background-image: url('/static/home/line.png');
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			.logo-bg{
				width:163*2rpx;
				height:163*2rpx;
				background-image: url('/static/home/logo-bg.png');
				background-size: 100% 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				.logo{
					width:69*2rpx;
					height:69*2rpx;
					background-image: url('/static/home/logo.png');
					background-size: 100% 100%;
				}
			}
		}
	}
	.return-agt{
		width:210*2rpx;
		height:34*2rpx;
		background-image: url('/static/home/agt.png');
		font-size:14*2rpx;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin:60rpx auto 14rpx;
		font-size:14*2rpx;
	}
	.count{
		width:281*2rpx;
		height:74*2rpx;
		background: rgba(105, 218, 115, 0.1);
		border-radius: 37*2rpx;
		border: 1px solid #69DA73;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		color:#CCCCCC;
		font-size:24*2rpx;
	}
	.desc{
		text-align: center;
		line-height:50*2rpx;
		font-size:14*2rpx;
	}
	.popup-content{
		width:375*2rpx;
		height:483*2rpx;
		position:relative;
		background-image: url('/static/home/Group@2x.png');
		background-size: 100% 100%;
		.close-btn{
			width:60%;
			height:110rpx;
			left:50%;
			margin-left:-30%;
			position:absolute;
			bottom:80rpx;
		}
	}
	/deep/.u-mode-center-box{
		background: none;
	}
</style>
